<div class="module-content">
    <div class="module-header">
        <h5 class="module-header-title"><i class="fas fa-table"></i>Feature(Class)</h5>
        <div class="module-header-action">
            <nz-alert nzType="info" nzMessage="One SHP at a time" nzShowIcon></nz-alert>
            <label class="btn btn-success">
                <input type="file" name="file" style="display: none;" (change)="publish($event)" multiple/>
                Publish(SHP)
            </label>
        </div>
    </div>
    <div class="module-body">
        <div class="panel panel-grid">
            <div class="panel-heading">
                <span class="panel-title">FeatureClass List</span>
            </div>
            <div class="panel-body">
                <div class="list">
                    <div class="list-body">

                        <div *ngFor="let item of features" class="list-grid-item list-grid1" [ngClass]="{'active': feature && item._id == feature._id}" (click)="active(item)">
                            <span class="area-a">{{item.name}}</span>
                            <div class="area-b"><label class="label label-primary">{{item.geomTypeAlias}}</label></div>
                            <span class="area-c"><i class="fas fa-th-large" [ngClass]="{'text-success': item.tile, 'text-gray': !item.tile}" tooltip="{{ 'spatial index:' + (item.tile || false)}}"></i></span>
                            <span class="area-d"><i class="fas fa-inbox" [ngClass]="{'text-success': item.cache, 'text-gray': !item.cache}" tooltip="{{ 'cache in memory:' + (item.cache || false)}}"></i></span>
                            <span class="area-e"><i class="fas fa-image" [ngClass]="{'text-success': item.image, 'text-gray': !item.image}" tooltip="{{ 'static images:' + (item.image || false)}}"></i></span>
                            <!--<div style="justify-self: center">
                                <button class="btn btn-danger btn-xs" (click)="delete(feature)">Delete</button>
                            </div>-->
                        </div>

                    </div>

                </div>
                <div class="panel-empty" *ngIf="!features || features.length == 0">Publish</div>
            </div>
        </div>
        <div class="panel panel-grid">
            <div class="panel-heading">
                <span class="panel-title">FeatureClass Detail{{feature? (' - ' + feature.name) : ''}}</span>
            </div>
            <div class="panel-body">
                <nz-tabset *ngIf="feature">
                    <nz-tab nzTitle="General">
                        <div class="panel">
                            <div class="panel-heading">
                                <span class="panel-title">General Info</span>
                            </div>
                            <div class="panel-body">
                                <div class="info-form">
                                    <div class="info-item">
                                        <div class="info-label">name</div>
                                        <div class="info-value">{{feature.name}}</div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">geometry type</div>
                                        <div class="info-value"><label class="label label-primary">{{feature.geomTypeAlias}}</label></div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">enable spatial index</div>
                                        <div class="info-value"><label class="label" [ngClass]="{'label-danger': !feature.tile, 'label-success': feature.tile}">{{feature.tile || false}}</label></div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">enable cache in memory</div>
                                        <div class="info-value"><label class="label" [ngClass]="{'label-danger': !feature.cache, 'label-success': feature.cache}">{{feature.cache || false}}</label></div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">enable static image</div>
                                        <div class="info-value"><label class="label" [ngClass]="{'label-danger': !feature.image, 'label-success': feature.image}">{{feature.image || false}}</label></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="panel">
                            <div class="panel-heading">
                                <span class="panel-title">Tile Info</span>
                            </div>
                            <div class="panel-body" style="display: grid;grid-gap:10px;grid-template-rows: auto 1fr">
                                <div><button class="btn btn-primary" (click)="generateTile()">Create</button></div>
                                <nz-table #tileTable [nzFrontPagination]="false" [nzData]="option.tile.stats" [nzShowPagination]="false" [nzScroll]="{'y': '260px'}">
                                    <thead>
                                    <tr>
                                        <th style="width: 200px;">Level</th>
                                        <th style="width: 200px;">xmin</th>
                                        <th style="width: 200px;">xmax</th>
                                        <th style="width: 200px;">ymin</th>
                                        <th style="width: 200px;">ymax</th>
                                        <th style="width: 200px;">tiles</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of tileTable.data">
                                        <td style="width: 200px;">{{item._id}}</td>
                                        <td style="width: 200px;">{{item.minx}}</td>
                                        <td style="width: 200px;">{{item.maxx}}</td>
                                        <td style="width: 200px;">{{item.miny}}</td>
                                        <td style="width: 200px;">{{item.maxy}}</td>
                                        <td style="width: 200px;">{{(item.maxx - item.minx + 1) * (item.maxy - item.miny + 1)}}</td>
                                    </tr>
                                    </tbody>
                                </nz-table>
                            </div>
                        </div>-->
                    </nz-tab>
                    <nz-tab nzTitle="Field">
                        <div class="table-container">
                            <div class="table-toolbar">
                                <button class="btn btn-primary" [disabled]="true">Add</button>
                            </div>
                            <nz-table #fieldTable [nzFrontPagination]="false" [nzData]="feature.fields" [nzShowPagination]="false" [nzScroll]="{'y': '500px'}">
                                <thead>
                                <tr>
                                    <!--<th nzShowCheckbox [(nzChecked)]="option.field.all_checked" [nzIndeterminate]="option.field.indeterminate" (nzCheckedChange)="checkAllFields($event)"></th>-->
                                    <th style="width: 200px;">Name</th>
                                    <th style="width: 240px;">Alias</th>
                                    <th style="width: 120px;">Type</th>
                                    <th style="text-align: center">Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor="let item of fieldTable.data">
                                    <!--<td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshFieldStatus()"></td>-->
                                    <td style="width: 200px;">{{item.name}}</td>
                                    <td style="width: 240px;">
                                        <div class="editable-cell">
                                            <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                {{item.alias}}
                                                <i nz-icon type="edit" class="editable-cell-icon" (click)="startFieldEdit(item)"></i>
                                            </div>
                                            <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                <input type="text" nz-input [(ngModel)]="item.alias_2">
                                                <i nz-icon type="close" class="editable-cell-icon" (click)="cancelFieldEdit(item)"></i>
                                                <i nz-icon type="check" class="editable-cell-icon" (click)="saveFieldEdit(item)"></i>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="width: 120px;">{{item.type}}</td>
                                    <td>
                                        <div class="editable-cell-action">
                                            <button class="btn btn-primary" [disabled]="true" (click)="deleteField(item)">Delete</button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </nz-table>
                        </div>
                    </nz-tab>
                    <nz-tab nzTitle="Symbol">
                        <div class="symbol-container">
                            <div class="symbol-type">
                                <nz-radio-group [(ngModel)]="feature.renderer.renderType" (change)="ribbon()">
                                    <label nz-radio [nzValue]="0" >Simple Renderer</label>
                                    <label nz-radio [nzValue]="1" >Category Renderer</label>
                                    <label nz-radio [nzValue]="2" >Class Renderer</label>
                                </nz-radio-group>
                            </div>
                            <div class="symbol-detail" [ngSwitch]="feature.renderer.renderType">
                                <div class="simple-renderer" *ngSwitchCase="0">
                                    <div class="input-group">
                                        <nz-select style="width: 240px;" [(ngModel)]="feature.renderer.simple.symbol" nzAllowClear nzPlaceHolder="Choose Symbol" [compareWith]="compareObject">
                                            <nz-option [nzValue]="symbol" [nzLabel]="symbol.name" *ngFor="let symbol of option.symbols"></nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                                <div class="category-renderer" *ngSwitchCase="1">
                                    <div class="category-field">
                                        <nz-select [(ngModel)]="feature.renderer.category.field_2" nzAllowClear nzPlaceHolder="Choose Field" [compareWith]="compareField">
                                            <nz-option [nzValue]="field" [nzLabel]="field.name" *ngFor="let field of feature.fields"></nz-option>
                                        </nz-select>
                                        <input type="color" nz-input [(ngModel)]="option.symbol.start_color" (ngModelChange)="ribbon()">
                                        <input type="color" nz-input [(ngModel)]="option.symbol.end_color" (ngModelChange)="ribbon()">
                                        <canvas style="height: 32px; width: 100%" #ribbonCanvas></canvas>
                                        <button class="btn btn-primary" (click)="createCategories()">Create</button>
                                    </div>
                                    <div class="category-table">
                                        <nz-table #categoryTable [nzFrontPagination]="false" [nzData]="feature.renderer.category.categories" [nzShowPagination]="false" [nzScroll]="{'y': '500px'}">
                                            <thead>
                                            <tr>
                                                <th style="width: 150px;">Label</th>
                                                <th style="width: 150px;">Value</th>
                                                <th style="width: 120px;">Radius</th>
                                                <th style="width: 120px;">Fill Color</th>
                                                <th style="width: 120px;">Fill Opacity</th>
                                                <th style="width: 120px;">Stroke Width</th>
                                                <th style="width: 120px;">Stroke Color</th>
                                                <th style="width: 120px;">Stroke Opacity</th>
                                                <th style="text-align: center">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr *ngFor="let item of categoryTable.data">
                                                <td style="width: 150px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.label}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.label_2">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 150px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper">
                                                            {{item.value}}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.radius}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.radius">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            <input type="color" nz-input [ngModel]="item.style.fillColor" readonly  [disabled]="true">
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="color" nz-input [(ngModel)]="item.style_2.fillColor">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.fillOpacity}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.fillOpacity">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.weight}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.weight">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            <input type="color" nz-input [ngModel]="item.style.color" readonly [disabled]="true">
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="color" nz-input [(ngModel)]="item.style_2.color">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.opacity}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.opacity">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="editable-cell-action">
                                                        <ng-container *ngIf="!item.edit">
                                                            <button class="btn btn-primary" (click)="startSymbolEdit(item)">Edit</button>
                                                        </ng-container>
                                                        <ng-container *ngIf="item.edit">
                                                            <button class="btn btn-success" (click)="saveSymbolEdit(item)">Save</button>
                                                            <button class="btn btn-primary" (click)="cancelSymbolEdit(item)">Cancel</button>
                                                        </ng-container>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </nz-table>
                                    </div>
                                </div>
                                <div class="class-renderer" *ngSwitchCase="2">
                                    <div class="class-field">
                                        <nz-select [(ngModel)]="feature.renderer.class.field_2" nzAllowClear nzPlaceHolder="Choose Field" [compareWith]="compareField">
                                            <ng-container *ngFor="let field of feature.fields">
                                                <nz-option [nzValue]="field" [nzLabel]="field.name" *ngIf="field.type=='integer64' || field.type=='integer32' || field.type=='real' "></nz-option>
                                            </ng-container>
                                        </nz-select>
                                        <input type="color" nz-input [(ngModel)]="option.symbol.start_color" (ngModelChange)="ribbon()">
                                        <input type="color" nz-input [(ngModel)]="option.symbol.end_color" (ngModelChange)="ribbon()">
                                        <canvas style="height: 32px; width: 100%" #ribbonCanvas></canvas>
                                        <input type="number" nz-input [(ngModel)]="option.symbol.classes" min="2" max="20" step="1">
                                        <button class="btn btn-primary" (click)="createClasses()">Create</button>
                                    </div>
                                    <div class="class-table">
                                        <nz-table #classTable [nzFrontPagination]="false" [nzData]="feature.renderer.class.breaks" [nzShowPagination]="false" [nzScroll]="{'y': '500px'}">
                                            <thead>
                                            <tr>
                                                <th style="width: 150px;">Label</th>
                                                <th style="width: 120px;">Min</th>
                                                <th style="width: 120px;">Max</th>
                                                <th style="width: 80px;">Radius</th>
                                                <th style="width: 120px;">Fill Color</th>
                                                <th style="width: 120px;">Fill Opacity</th>
                                                <th style="width: 100px;">Stroke Width</th>
                                                <th style="width: 120px;">Stroke Color</th>
                                                <th style="width: 120px;">Stroke Opacity</th>
                                                <th style="text-align: center">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr *ngFor="let item of classTable.data">
                                                <td style="width: 150px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.label}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.label_2">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.min}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.min_2">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.max}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.max_2">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.radius}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.radius">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            <input type="color" nz-input [ngModel]="item.style.fillColor" readonly  [disabled]="true">
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="color" nz-input [(ngModel)]="item.style_2.fillColor">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.fillOpacity}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.fillOpacity">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.weight}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.weight">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            <input type="color" nz-input [ngModel]="item.style.color" readonly [disabled]="true">
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="color" nz-input [(ngModel)]="item.style_2.color">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td style="width: 120px;">
                                                    <div class="editable-cell">
                                                        <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                            {{item.style.opacity}}
                                                        </div>
                                                        <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                            <input type="text" nz-input [(ngModel)]="item.style_2.opacity">
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="editable-cell-action">
                                                        <ng-container *ngIf="!item.edit">
                                                            <button class="btn btn-primary" (click)="startSymbolEdit(item)">Edit</button>
                                                        </ng-container>
                                                        <ng-container *ngIf="item.edit">
                                                            <button class="btn btn-success" (click)="saveSymbolEdit(item)">Save</button>
                                                            <button class="btn btn-primary" (click)="cancelSymbolEdit(item)">Cancel</button>
                                                        </ng-container>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </nz-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nz-tab>
                    <nz-tab nzTitle="Label">
                        <div class="label-container">
                            <div class="panel">
                                <div class="label-info-form" >
                                    <div class="info-item">
                                        <div class="info-label">field</div>
                                        <nz-select [(ngModel)]="feature.label.field" nzAllowClear nzPlaceHolder="Choose Field" [compareWith]="compareField">
                                            <nz-option *ngFor="let field of feature.fields" [nzValue]="field" [nzLabel]="field.name" ></nz-option>
                                        </nz-select>
                                    </div>
                                    <div class="info-item">
                                    </div>
                                    <div class="info-item">
                                    </div>
                                    <div class="info-item">
                                    </div>
                                    <div class="info-item">
                                    </div>

                                    <div class="info-item">
                                        <div class="info-label">zoom min</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.zoom.min">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">zoom max</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.zoom.max">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                    </div>
                                    <div class="info-item">
                                    </div>
                                    <div class="info-item">
                                    </div>

                                    <div class="info-item">
                                        <div class="info-label">font family</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.font.family">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">font size</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.font.size">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">font color</div>
                                        <div class="info-value">
                                            <input type="color" nz-input [(ngModel)]="feature.label.font.color">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">font bold</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.font.bold">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">padding</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.background.padding">
                                        </div>
                                    </div>

                                    <div class="info-item">
                                        <div class="info-label">back visible</div>
                                        <div class="info-value">
                                            <nz-switch [(ngModel)]="feature.label.background.visible"></nz-switch>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">back color</div>
                                        <div class="info-value">
                                            <input type="color" nz-input [(ngModel)]="feature.label.background.color">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">border visible</div>
                                        <div class="info-value">
                                            <nz-switch [(ngModel)]="feature.label.border.visible"></nz-switch>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">border color</div>
                                        <div class="info-value">
                                            <input type="color" nz-input [(ngModel)]="feature.label.border.color">
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div class="info-label">border width</div>
                                        <div class="info-value">
                                            <input nz-input [(ngModel)]="feature.label.border.width">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nz-tab>
                    <nz-tab nzTitle="Table">
                        <div class="data-container">
                            <div class="data-toolbar">
                                <button class="btn btn-primary" (click)="search()">Search</button>
                                <button class="btn btn-primary" [disabled]="true">Batch</button>
                            </div>
                            <div class="data-table" style="overflow-x: auto; ">
                                <nz-table #dataTable [nzFrontPagination]="true" [nzData]="option.table.result" [nzShowPagination]="true" [nzBordered]="true" [nzScroll]="{ x: '800px', y: '500px' }">
                                    <thead>
                                    <tr>
                                        <th style="word-break: normal; min-width: 120px; max-width: 120px;" nzWidth="120px" *ngFor="let field of feature.fields">{{field.name}}</th>
                                        <th style="text-align: center; min-width: 240px;" nzWidth="240px">Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr *ngFor="let item of dataTable.data">
                                        <td style="word-break: normal; min-width: 120px; max-width: 120px;" nzWidth="120px"  *ngFor="let field of feature.fields">

                                            <div class="editable-cell">
                                                <div class="editable-cell-text-wrapper" *ngIf="!item.edit">
                                                    {{item.properties[field.name]}}
                                                </div>
                                                <div class="editable-cell-input-wrapper" *ngIf="item.edit">
                                                    <input type="text" nz-input [(ngModel)]="item.properties_2[field.name]">
                                                </div>
                                            </div>
                                        </td>
                                        <td style="text-align: center; min-width: 240px;">
                                            <div class="editable-cell-action">
                                                <ng-container *ngIf="!item.edit">
                                                    <button class="btn btn-primary" (click)="startRecordEdit(item)">Edit</button>
                                                </ng-container>
                                                <ng-container *ngIf="item.edit">
                                                    <button class="btn btn-success" (click)="saveRecordEdit(item)">Save</button>
                                                    <button class="btn btn-primary" (click)="cancelRecordEdit(item)">Cancel</button>
                                                </ng-container>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </nz-table>
                            </div>
                        </div>
                    </nz-tab>
                    <!--<nz-tab nzTitle="Tile">
                        <div class="tile-container">
                            <div class="tile-toolbar">
                                <button class="btn btn-primary" (click)="generateTile()">Create</button>
                            </div>
                        </div>
                    </nz-tab>-->
                </nz-tabset>
                <div class="panel-empty" *ngIf="!feature">Publish and Select FeatureClass</div>
            </div>
            <div class="panel-footer">
                <button class="btn btn-danger" (click)="delete()" [disabled]="!feature">Delete</button>
                <div class="panel-footer-action">
                    <button class="btn btn-success" (click)="update()" [disabled]="!feature">Update</button>
                </div>
            </div>
        </div>
    </div>
</div>
